<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>装修备案 - 智慧园区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .ios-status-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
            z-index: 50;
        }
        
        .ios-status-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ios-tab-bar {
            height: 83px; /* 包含安全区域的高度 */
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            padding-bottom: 30px; /* 安全区域 */
            z-index: 50;
        }
        
        .ios-tab-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        
        .tab-icon {
            font-size: 22px;
            margin-bottom: 4px;
        }
        
        .tab-label {
            font-size: 10px;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .glass-card.dark {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .main-content {
            height: calc(100vh - 127px); /* 状态栏 + 底部导航的高度 */
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            padding-bottom: 20px;
        }
        
        .main-content::-webkit-scrollbar {
            display: none;
        }
        
        .dark-mode .glass-card {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-status-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-tab-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .status-badge {
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-pending {
            background-color: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }
        
        .status-processing {
            background-color: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }
        
        .status-approved {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }
        
        .status-rejected {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }
        
        .dark .status-pending {
            background-color: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }
        
        .dark .status-processing {
            background-color: rgba(59, 130, 246, 0.2);
            color: #60a5fa;
        }
        
        .dark .status-approved {
            background-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }
        
        .dark .status-rejected {
            background-color: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }
        
        .tab-button {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 14px;
            position: relative;
        }
        
        .tab-button.active {
            color: #10b981;
            font-weight: 500;
        }
        
        .tab-button.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #10b981;
            border-radius: 3px;
        }
        
        .dark .tab-button.active {
            color: #34d399;
        }
        
        .dark .tab-button.active:after {
            background-color: #34d399;
        }
        
        .step-circle {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        .step-active {
            background-color: #10b981;
            color: white;
        }
        
        .step-completed {
            background-color: #d1fae5;
            color: #10b981;
        }
        
        .step-pending {
            background-color: #e5e7eb;
            color: #6b7280;
        }
        
        .dark .step-completed {
            background-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }
        
        .dark .step-pending {
            background-color: #374151;
            color: #9ca3af;
        }
        
        .step-line {
            width: 2px;
            flex-grow: 1;
            background-color: #e5e7eb;
            margin-left: 11px;
        }
        
        .dark .step-line {
            background-color: #374151;
        }
        
        .step-line-active {
            background-color: #10b981;
        }
        
        .dark .step-line-active {
            background-color: #34d399;
        }
    </style>
</head>
<body>
    <div id="app" class="relative h-full">
        <!-- iOS 状态栏 -->
        <div class="ios-status-bar">
            <div class="flex justify-between items-center w-full">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">9:41</div>
                <div class="flex space-x-2">
                    <i class="fas fa-signal text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-wifi text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-battery-full text-gray-800 dark:text-gray-200"></i>
                </div>
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="main-content bg-gray-50 dark:bg-gray-900">
            <!-- 顶部导航栏 -->
            <div class="px-4 py-3 bg-white dark:bg-gray-800 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center">
                    <a href="home.html" class="mr-4">
                        <i class="fas fa-chevron-left text-gray-600 dark:text-gray-300"></i>
                    </a>
                    <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-100">装修备案</h1>
                </div>
                <a href="decoration-create.html" class="flex items-center text-blue-500 dark:text-blue-400">
                    <i class="fas fa-plus mr-1 text-sm"></i>
                    <span class="text-sm">新增备案</span>
                </a>
            </div>
            
            <!-- 选项卡 -->
            <div class="flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
                <div class="tab-button active">全部</div>
                <div class="tab-button">审核中</div>
                <div class="tab-button">已通过</div>
                <div class="tab-button">已驳回</div>
            </div>
            
            <!-- 备案列表 -->
            <div class="p-4">
                <!-- 备案项 1 -->
                <div class="glass-card mb-4 overflow-hidden">
                    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">A栋 5层 503室 办公室装修</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">申请编号：DEC-20230705-001</div>
                            </div>
                            <div class="status-badge status-processing">审核中</div>
                        </div>
                        <div class="flex items-center mt-3">
                            <div class="flex flex-col items-center">
                                <div class="step-circle step-completed">
                                    <i class="fas fa-check text-xs"></i>
                                </div>
                                <div class="step-line step-line-active"></div>
                                <div class="step-circle step-active">2</div>
                                <div class="step-line"></div>
                                <div class="step-circle step-pending">3</div>
                                <div class="step-line"></div>
                                <div class="step-circle step-pending">4</div>
                            </div>
                            <div class="ml-3">
                                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">资料审核中</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">预计审核完成时间：2023-07-08</div>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 flex justify-between items-center bg-gray-50 dark:bg-gray-800">
                        <div class="text-xs text-gray-500 dark:text-gray-400">申请时间：2023-07-05 10:30</div>
                        <button class="px-3 py-1 text-xs text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 rounded-full">查看详情</button>
                    </div>
                </div>
                
                <!-- 备案项 2 -->
                <div class="glass-card mb-4 overflow-hidden">
                    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">B栋 3层 308室 隔断改造</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">申请编号：DEC-20230620-003</div>
                            </div>
                            <div class="status-badge status-approved">已通过</div>
                        </div>
                        <div class="flex items-center mt-3">
                            <div class="flex flex-col items-center">
                                <div class="step-circle step-completed">
                                    <i class="fas fa-check text-xs"></i>
                                </div>
                                <div class="step-line step-line-active"></div>
                                <div class="step-circle step-completed">
                                    <i class="fas fa-check text-xs"></i>
                                </div>
                                <div class="step-line step-line-active"></div>
                                <div class="step-circle step-completed">
                                    <i class="fas fa-check text-xs"></i>
                                </div>
                                <div class="step-line step-line-active"></div>
                                <div class="step-circle step-completed">
                                    <i class="fas fa-check text-xs"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">备案已完成</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">可以开始装修施工，请遵守园区装修管理规定</div>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 flex justify-between items-center bg-gray-50 dark:bg-gray-800">
                        <div class="text-xs text-gray-500 dark:text-gray-400">申请时间：2023-06-20 15:45</div>
                        <button class="px-3 py-1 text-xs text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 rounded-full">查看详情</button>
                    </div>
                </div>
                
                <!-- 备案项 3 -->
                <div class="glass-card mb-4 overflow-hidden">
                    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">C栋 2层 215室 水电改造</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">申请编号：DEC-20230610-002</div>
                            </div>
                            <div class="status-badge status-rejected">已驳回</div>
                        </div>
                        <div class="flex items-center mt-3">
                            <div class="flex flex-col items-center">
                                <div class="step-circle step-completed">
                                    <i class="fas fa-check text-xs"></i>
                                </div>
                                <div class="step-line step-line-active"></div>
                                <div class="step-circle step-completed">
                                    <i class="fas fa-times text-xs"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">资料审核未通过</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">原因：水电改造方案不符合园区安全标准</div>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 flex justify-between items-center bg-gray-50 dark:bg-gray-800">
                        <div class="text-xs text-gray-500 dark:text-gray-400">申请时间：2023-06-10 09:15</div>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-xs text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 rounded-full">查看详情</button>
                            <button class="px-3 py-1 text-xs text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 rounded-full">重新提交</button>
                        </div>
                    </div>
                </div>
                
                <!-- 备案项 4 -->
                <div class="glass-card mb-4 overflow-hidden">
                    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">A栋 6层 612室 墙面粉刷</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">申请编号：DEC-20230525-005</div>
                            </div>
                            <div class="status-badge status-pending">待审核</div>
                        </div>
                        <div class="flex items-center mt-3">
                            <div class="flex flex-col items-center">
                                <div class="step-circle step-active">1</div>
                                <div class="step-line"></div>
                                <div class="step-circle step-pending">2</div>
                                <div class="step-line"></div>
                                <div class="step-circle step-pending">3</div>
                                <div class="step-line"></div>
                                <div class="step-circle step-pending">4</div>
                            </div>
                            <div class="ml-3">
                                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">等待资料审核</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">提交后1-3个工作日内进行审核</div>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 flex justify-between items-center bg-gray-50 dark:bg-gray-800">
                        <div class="text-xs text-gray-500 dark:text-gray-400">申请时间：2023-05-25 16:20</div>
                        <button class="px-3 py-1 text-xs text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 rounded-full">查看详情</button>
                    </div>
                </div>
                
                <!-- 加载更多 -->
                <div class="text-center py-4">
                    <button class="text-sm text-gray-500 dark:text-gray-400 flex items-center justify-center mx-auto">
                        加载更多 <i class="fas fa-chevron-down ml-1"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- iOS 底部导航栏 -->
        <div class="ios-tab-bar">
            <a href="home.html" class="tab-item text-gray-500 dark:text-gray-400">
                <i class="fas fa-home tab-icon"></i>
                <span class="tab-label">首页</span>
            </a>
            <div class="tab-item text-gray-500 dark:text-gray-400">
                <i class="fas fa-bullhorn tab-icon"></i>
                <span class="tab-label">公告</span>
            </div>
            <div class="tab-item text-gray-500 dark:text-gray-400">
                <i class="fas fa-user tab-icon"></i>
                <span class="tab-label">我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 检测系统暗色模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-mode');
            document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .status-badge').forEach(el => {
                el.classList.add('dark');
            });
        }
        
        // 监听系统暗色模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (e.matches) {
                document.body.classList.add('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .status-badge').forEach(el => {
                    el.classList.add('dark');
                });
            } else {
                document.body.classList.remove('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .status-badge').forEach(el => {
                    el.classList.remove('dark');
                });
            }
        });
        
        // 选项卡切换
        document.querySelectorAll('.tab-button').forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有选中状态
                document.querySelectorAll('.tab-button').forEach(el => {
                    el.classList.remove('active');
                });
                // 添加选中状态
                tab.classList.add('active');
            });
        });
    </script>
</body>
</html> 